/*----- 公共样式 --------*/
body{
    background-color:rgb(245, 245, 245);
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

.container{
    width: 1230px;
    margin:0 auto;
    height: 615px;
    /* background-color: rgb(228, 156, 156); */
}

/*---- 左边内容 --------*/
/* 左边大盒子 */
.left{
    float: left;
    width: 235px;
    height: 615px;
    /* background-color: rgb(182, 177, 133); */
}
/* 左边item hover过渡效果 */
.left-item:hover{
    transition:all .2s linear;
    transform:translateY(-2px);
    box-shadow:  0 15px 30px rgba(0,0,0,.1);
}

/* -------右边内容----------- */
/* 右边大盒子 */
.right{
    float: right;
    width: 981.25px;
    height: 615px;
    /* background-color: rgb(133, 182, 133); */
}
/* 右边项目小盒子 */
.right-item{
    float: left;
    width: 235px;
    height: 300px;
    background-color: #fff;
    /* background-color: rgb(131, 145, 81); */
    /* border:1px solid black; */
}
/* 所有小盒子排除第4n个的右外边距 */
.right-item:not(:nth-child(4n)){
    margin-right: 13px;
}
/* 第二排以后的小盒子上外边距 */
.right-item:nth-child(n+5){
    margin-top:15px;
}
/* 让图片，文字在父亲盒子水平居中，通过自动继承的方式
图片也是inline，是最特殊的inline，可以设置宽高
*/
.right-item{
    text-align: center;
    /* 设置小盒子的上下内边距 */
    padding:20px 0;
    /* 设置内边距而不引起盒子大小的变化 */
    box-sizing: border-box;
}
/* 设置图片大小 */
.right-item .item-img img{
    width: 160px;
    height: 160px;
}
/* 设置标题文字样式 */
.right-item .item-title{
    margin:15px 0 0 0;
    font-weight: normal;
    font-size: 16px;
}
/* 设置手机简介 */
.right-item .item-brief{
    margin:6px 0 0 0;
    font-size: 12px;
    color: #b0b0b0;
}
/* 设置手机价格 */
.item-price{
    font-size:14px;
    margin-top:13px;
}
.right-item .item-price .new-price{
    color: red ;
    margin-right: 10px;
}
.right-item .item-price .old-price{
    color: #b0b0b0; 
    text-decoration: line-through;
}
/* 设置hover的过渡 */
.right-item:hover{
    transition:all .2s linear;
    transform:translateY(-2px);
    box-shadow:  0 15px 30px rgba(0,0,0,.1);
}

/* 使用flex布局 */
.flex-container{
    width: 1230px;
    margin:50px auto;
    background-color: rgb(204, 166, 166);
    display: flex;
    justify-content: space-between
}

.item-left{
    width: 235px;
    height: 615px;
    background-color: rgb(236, 217, 191);
}
.item-right{
    width: 981.25px;
    height: 615px;
    background-color: rgb(224, 236, 191);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.phone-item{
    width: 235px;
    height: 300px;
    background-color: rgb(73, 153, 53);
}
